<template>
  <div class="top-bars">
    <div class="top-bars-item" v-for="(item, index) in data" :key="index">
      <div >
        <span class="bar-title">{{item.名称}}</span>
        <span class="bar-num">{{ item.金额 }}</span>
        <span class="bar-unit">{{ item.单位 }}</span>
      </div>
      <div>
        <span>同比</span>
        <span class="bar-per">{{ item.同比 }}</span>
        <span>%</span>
        <img v-if="item.是否增长" class="bar-img" src="@/assets/qianjiang/up.png" />
        <img v-else class="bar-img" src="@/assets/qianjiang/down.png" />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'top-bars',
  props: {
    data: Array
  },
  data() {
    return {}
  },
  methods: {},
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.top-bars {
  position: absolute;
  width: 70%;
  left: 15%;
  display: flex;
  justify-content: space-between;
  height: 3.7%;
  top: 8.74%;
  z-index: 2;

  &-item {
    height: 100%;
    width: 30.5%;
    background: url("~@/assets/qianjiang/bar-c.png") no-repeat ;
    background-size: 100% 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6% 3.5%;

    &>div {
    }

    &:first-child {
      background: url("~@/assets/qianjiang/bar-l.png") no-repeat ;
      background-size: 100% 100%;
      padding: 0.6% 2% 0.6% 3.5%;
    }
    &:last-child {
      background: url("~@/assets/qianjiang/bar-r.png") no-repeat ;
      background-size: 100% 100%;
      padding: 0.6% 3% 0.6% 2% ;
    }
  }

  .bar {
    &-num {
      color: #F3C038;
      font-size: 28px;
      font-weight: bold;
    }

    &-unit {
      font-weight: bold;
    }

    &-per {
      font-size: 28px;
      font-weight: bold;
    }

    &-img {
      vertical-align: bottom;
    }
  }
}
</style>
